React Development with the Shards React Library — Popover and Number Slider

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Popover

We can add a popover into our React app with the Popover component.

For instance, we can write:

import React, { useState } from "react";
import { Button, Popover, PopoverBody, PopoverHeader } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [open, setOpen] = useState();

  const toggle = () => {
    setOpen((o) => !o);
  };

  return (
    <div className="App">
      <Button id="popover-1" onClick={toggle}>
        Toggle
      </Button>
      <Popover
        placement="bottom"
        open={open}
        toggle={toggle}
        target="#popover-1"
      >
        <PopoverHeader>Title</PopoverHeader>
        <PopoverBody>Anim pariatur cliche reprehenderit</PopoverBody>
      </Popover>
    </div>
  );
}

We add the Popover with the placement prop to set the placement.

We can set placement to 'top' or 'bottom' .

The open prop lets us set the open state.

toggle component lets us toggle the popover.

PopoverHeader has the popover header.

PopoverBody has the body.

Progress

The Progress component lets us display progress bars in our React app.

For instance, we can write:

import React from "react";
import { Progress } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Progress theme="primary" value={50} />;
    </div>
  );
}

to add a progress bar.

value has the progress value ranging from 0 to 100.

We can add labels to the progress bar by populating the child of the Progress component:

import React from "react";
import { Progress } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Progress theme="primary" value={50}>
        50
      </Progress>
      ;
    </div>
  )
}

And we add multiple progress bars with the multi prop:

import React from "react";
import { Progress } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Progress multi>
        <Progress bar value="50" />
        <Progress bar theme="success" value="20" />
      </Progress>
    </div>
  );
}

Slider

We can add a number slider with the Slider component.

For instance, we can write:

import React from "react";
import { Slider } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Slider
        connect={[true, false]}
        start={[20]}
        range={{ min: 0, max: 100 }}
      />
    </div>
  );
}

The connect prop displays the colored bars between handles.

start has the initial value.

range has the min and max values we can select.

We can change the color of the bar with the theme prop:

import React from "react";
import { Slider } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Slider
        theme="success"
        connect={[true, false]}
        start={[20]}
        range={{ min: 0, max: 100 }}
      />
    </div>
  );
}

Conclusion

We can add popovers and range sliders with Shards React.